<template>
  <nav-bar>
    <template v-slot:default>我的预约</template>
  </nav-bar>
  <div class="all">
    <div class="goods-item" v-for="(item, index) in list" :key="index">
      <div class="goods-info-left">
        <h3>{{ list[index].year }}年定期存款</h3>
        <p class="price">{{ list[index].rate }}<small>%</small></p>
        <h5 style="color:#b4b4b4">年利率</h5>
      </div>
      <div class="goods-info-right">
        <el-button type="success" @click="clear(index)">取消预约</el-button>
      </div>
    </div>
  </div>
</template>

<script>
import { reactive, toRefs } from "vue";
import { allSchedule, deleteSchedule } from "@/api/schedule";
import { theProduct } from "@/api/product";
import NavBar from "../../components/common/navbar/NavBar.vue";
export default {
  components: {
    NavBar,
  },
  //   props: {
  //     product: Object,
  //     default() {
  //       return {};
  //     },
  //   },
  setup() {
    const state = reactive({
      list1: [],
      list: [],
      count: 0,
    });
    const initAccount = async () => {
      const res = await allSchedule(localStorage.getItem("userID"));
      for (let item of res.data) {
        state.list1.push(item.product);
      }
console.log("lala"+state.list1)

      //   for(let item of state.list1){
      //   const res = await theProduct(item);
      //   state.list.push(res.data);
      //  }
      for (let item of state.list1) {
        const res = await theProduct(item);
        for (let iit of res.data) {
          state.list.push(iit);
        }
      }
    };
    initAccount();
    //  console.log(state.list[0]);

    // const clear = (index) => {
    //     delete(schList);
    //     state.list.splice(index,1);
    // }
    
    const clear = async (index) => {
      await deleteSchedule(state.list[index].id);
      location.reload();
    };
    return {
      ...toRefs(state),
      clear,
    };
  },
};
</script>

<style lang="scss" scoped>
.goods-item {
  margin: 20px auto;
  width: 90%;
  padding-bottom: 20px;
  position: relative;
  display: flex;
  border-bottom: 3px solid #efefef;
  margin-bottom: 15px;
}
.goods-info-left {
  padding-left: 6%;
  text-align: left;
  width: 50%;
}
.price {
  color: red;
  font-size: 40px;
  font-weight: 700;
  line-height: 70px;
}
.goods-info-right {
  width: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.all {
  margin: 70px auto;
  width: 90%;
  border: 1px solid #efefef;
  background-color: #fff;
  border-radius: 15px;
  box-shadow: 0 0 8px #fff, 0 5px 13px rgb(0 0 0 / 7%);
}
</style>
